<template>
    <div class="main">
        <div class="left">
            <div class="title">
                <p>进度评价</p>
            </div>
            <div class="cent">
                <div style="padding:16px 24px;display:flex">
                    <div class="cll">
                        <div class="aop">45天</div>
                        <br />
                        <div class="grayText">累计施工天数</div>
                    </div>
                    <div class="cll">
                        <div class="aopp">720天</div>
                        <br />
                        <div class="grayText">总任务天数</div>
                    </div>
                    <div class="cll">
                        <el-progress
                            type="circle"
                            :percentage="100"
                            :show-text="false"
                            :stroke-width="14"
                            :width="88"
                        ></el-progress>
                    </div>
                </div>
                <div style="padding:16px 24px;display:flex">
                    <div class="cl">
                        <div class="grayText" style="text-align:left">工期</div>
                        <div class="grayText" style="color: #ffffff;">2020-12-30 至 2022-02-10</div>
                        <!-- <div class="grayText">总产值</div> -->
                    </div>
                </div>
            </div>
            <div class="title">
                <p>施工产值</p>
            </div>
            <div class="cent">
                <div style="padding:16px 24px;display:flex">
                    <div class="cl">
                        <div class="aop">{{ sum }}亿元</div>
                        <div class="grayText">总产值</div>
                    </div>
                    <div class="cc">
                        <el-progress
                            type="circle"
                            :width="60"
                            :show-text="false"
                            :stroke-width="6"
                            :percentage="parseInt((chanZ.sumValueAll / sum * 100))"
                        ></el-progress>
                    </div>

                    <div class="cr">
                        <div class="blueText">{{ (chanZ.sumValueAll / sum * 100).toFixed(2) }}%</div>
                        <div class="grayText appl">当前已完成</div>
                    </div>
                </div>
                <div style="padding:16px 24px;display:flex">
                    <div style="width: 33.3%;" class="cl">
                        <div class="aopp">{{ chanZ.sumValueMonth }}亿元</div>
                        <div class="grayText">上月产值</div>
                    </div>
                    <div style="width: 33.3%;" class="cl">
                        <div class="aopp">{{ chanZ.sumValueQuarter }}亿元</div>
                        <div class="grayText">本季度</div>
                    </div>
                    <div style="width: 33.3%;" class="cl">
                        <div class="aopp">{{ chanZ.sumValueAll }}亿元</div>
                        <div class="grayText">当前累计产值</div>
                    </div>
                </div>
            </div>
            <div class="title">
                <p>产值分析</p>
            </div>
            <div class="cent">
                <div id="container1"></div>
            </div>
        </div>
        <div class="centent">
            <div class="title">
                <p>实时进度</p>
            </div>
            <div class="cent2" style="  position: relative;">
                <div class="pos1">
                    <div class="posC1">
                        <p class="posC1Text">BIM进度</p>
                    </div>
                    <div style="height:24px"></div>

                    <div class="posC1" @click="videoShow=!videoShow">
                        <p class="posC1Text">航拍进度</p>
                    </div>
                </div>

                <video
                    class="vid"
                    src="https://jjjt.oss-cn-shanghai.aliyuncs.com/ZHBHZ/ztsjxcp.mp4"
                    type="video/mp4"
                    controls="controls"
                    autoplay="autoplay"
                    v-if="videoShow"
                ></video>
            </div>
            <div class="bl">
                <div class="c2">已施工</div>
                <div class="c1">正在施工</div>
                <div class="c3">待施工</div>
            </div>
            <div class="title">
                <p>进度里程碑</p>
            </div>
            <div class="cent3">
                <hr class="hrr" />
                <div style="padding:16px 24px">
                    <div class="scoll1">
                        <div
                            style="text-align: left;"
                            :style="{ width: 120 * liCheng.length + 'px' }"
                        >
                            <div
                                v-for="(item, index) in liCheng"
                                :key="index"
                                style="display:inline-block;position: relative;"
                            >
                                <div
                                    class="bco"
                                    :style="{ left: 130 * index + 'px' }"
                                    v-show="index % 2 == 0"
                                >
                                    <div class="yellow1"></div>
                                    <p class="nowra">{{ item.projectName }}</p>
                                    <img
                                        @click="showCi(item.imgUrl)"
                                        :src="oss + item.imgUrl"
                                        width="100"
                                        height="60"
                                    />
                                </div>

                                <div
                                    class="bco1"
                                    :style="{ left: 130 * index + 'px' }"
                                    v-show="index % 2 != 0"
                                >
                                    <img
                                        @click="showCi(item.imgUrl)"
                                        :src="oss + item.imgUrl"
                                        width="100"
                                        height="60"
                                    />
                                    <p class="nowra">{{ item.projectName }}</p>
                                    <div class="yellow1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="right">
            <div class="title">
                <p>进度对比</p>
            </div>
            <div class="cent1">
                <div class="p24">
                    <div class="jinduTop">
                        <div class="blue"></div>
                        <div class="blueFont">正在施工</div>
                        <div class="red"></div>
                        <div class="redFont">施工延期</div>
                        <div class="yellow"></div>
                        <div class="yellowFont">未开工</div>
                    </div>
                    <div class="jinduC scoll">
                        <div v-for="(item,index) in jindu" :key="index" class="flex">
                            <div
                                class="yellow"
                                v-if="item.practical_day == 0"
                                style="margin-top:25px"
                            ></div>
                            <div
                                class="blue"
                                v-else-if="item.practical_day <= item.duration"
                                style="margin-top:25px"
                            ></div>
                            <div
                                class="red"
                                v-else-if="item.practical_day > item.duration"
                                style="margin-top:25px"
                            ></div>
                            <div class="cctext">{{ item.progress_name }}</div>
                            <div>
                                <div class="aaa">
                                    <div class="time">计划：{{ item.start_time }}~{{ item.end_time }}</div>
                                    <el-slider
                                        v-model="item.jihua"
                                        :show-tooltip="false"
                                        range
                                        :max="1100"
                                        :disabled="true"
                                        class="tip1"
                                    ></el-slider>
                                    <el-slider
                                        v-model="item.shiji"
                                        :show-tooltip="false"
                                        range
                                        class="tip2"
                                        :disabled="true"
                                        :max="1100"
                                    ></el-slider>
                                    <div
                                        class="time"
                                    >实际：{{ item.start_time }}~{{ item.practical_time ? item.practical_time : '暂无' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="title">
                <p>滞后分析</p>
            </div>
            <div class="cent">
                <div class="p16">
                    <div class="zhfx" v-for="(item,index) in reasons" :key="index">
                        <p class="zhTest">{{ item.lagType }}</p>
                        <p class="zhTest1">
                            <span>次数：{{ item.count }}</span>
                            <span
                                style="float:right"
                            >占比：{{ (item.count / reasonsAll * 100).toFixed(2) }}%</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Chart } from '@antv/g2';
export default {
    data() {
        return {
            oss: "http://jjjt.oss-cn-shanghai.aliyuncs.com/",
            jindu: "",
            reasons: "",
            reasonsAll: "",
            liCheng: "",
            chanZ: "",
            sum: "",
            pro: 0,
            videoShow: false,
        };
    },
    created() { },
    mounted() {

        // 进度对比
        this.$api
            .count_PCComparison({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data;
                for (let i = 0; i < data.length; i++) {

                    data[i].jihua = data[i].jihua.split(',');
                    data[i].shiji = data[i].shiji.split(',');

                }
                // console.log(data)
                this.jindu = data;
            })
            .catch((error) => {
                console.log("错误:", error);
            });


        // 总数
        this.$api
            .LagReasonsCountLagReasonsAll({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data;

                // console.log(data)
                this.reasonsAll = data;
            })
            .catch((error) => {
                console.log("错误:", error);
            });

        // 滞后分析

        this.$api
            .LagReasonsCountLagReasons({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data.data;

                // console.log(data)
                this.reasons = data;
            })
            .catch((error) => {
                console.log("错误:", error);
            });

        // 里程碑
        this.$api
            .PlanMilestoneselectPlanMilestone({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data.data;

                // console.log(data)
                this.liCheng = data;
            })
            .catch((error) => {
                console.log("错误:", error);
            });

        // 产值 ValueRecordValueRecordCount

        this.$api
            .ValueRecordValueRecordCount({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data;

                console.log(data)
                this.chanZ = data;
            })
            .catch((error) => {
                console.log("错误:", error);
            });

        this.$api
            .ValueZSumValue({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data.data[0].altogether;

                // console.log(data)
                this.sum = data;

                // this.pro = (chanZ.sumValueAll / sum * 100).toFixed(2)
            })
            .catch((error) => {
                console.log("错误:", error);
            });


        this.chanZhi();
    },
    methods: {

        // 产值分析
        chanZhi() {


            this.$api
                .ValueRecordselectValueRecord({ section_id: localStorage.getItem("section_id") })
                .then((res) => {
                    let data = res.data.data;

                    // console.log(data)
                    const chart = new Chart({
                        container: 'container1',
                        autoFit: true,
                        height: 240,
                        padding: [30, 20, 70, 30]
                    });

                    chart.data(data);
                    chart.scale({
                        monthValue: {
                            min: 0,
                            max: 10,
                            alias: "实际产值"
                        },
                        planValue: {
                            min: 0,
                            max: 10,
                            alias: "计划产值"
                        }
                    });



                    chart.tooltip({
                        showCrosshairs: false,
                        shared: true,
                    });


                    // chart.label('monthValue', (xValue) => {
                    //         return {
                    //             content: xValue + '%',
                    //         };
                    //     });

                    chart.axis(true);  // 是否显示坐标轴
                    // chart.axis('nlp', false);

                    chart.legend({
                        custom: true,
                        items: [
                            { name: '实际产值', value: 'monthValue', marker: { symbol: 'line', style: { stroke: '#51EDE4', lineWidth: 2 } } },
                            { name: '计划产值', value: 'planValue', marker: { symbol: 'line', style: { stroke: '#1A9BFE', lineWidth: 2 } } },
                        ],
                        itemFormatter() {
                            return val; // val 为每个图例项的文本值
                        }
                    });

                    // chart.legend(false); 
                    //{数据源名称：替换的名称}
                    // chart.legend('monthValue', {
                    //     itemFormatter(val) {
                    //         return "1234"; // val 为每个图例项的文本值
                    //     }
                    // });




                    const map = {
                        on: '总',
                        on_a: 'A相',
                        on_b: 'B相',
                        on_c: 'C相',
                    };



                    chart.line().position('time*monthValue').color('#51EDE4').shape('smooth');;
                    chart.line().position('time*planValue').color('#1A9BFE').shape('smooth');;
                    chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
                    chart.render();
                })
                .catch((error) => {
                    console.log("错误:", error);
                });
        }

    },
};
</script>
<style src="./css/page05.css" scoped>
</style>
